<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Slider Card</title>
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #cecece;
}
/* 第二步：开始写样式 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: absolute;
  height: 350px;
  width: 100%;
  max-width: 850px;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.3);
}

.card .inner_part {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 30px;
  height: 350px;
  position: absolute;
}

/* 图片样式 */
.inner_part .img {
  height: 260px;
  width: 260px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0,0,0,0.2);
}

.img img {
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  transition: .6s;
}

/* 点击切换横条，选中radio，更改图片样式 */
#slide_1:checked ~ .inner_part .img_1,
#slide_2:checked ~ .inner_part .img_2,
#slide_3:checked ~ .inner_part .img_3 {
  /* 透明度设置1显示图片 */
  opacity: 1;
  transition-delay: .2s;
}

/* 内容样式 */
.content {
  padding: 0 20px 0 35px;
  width: 530px;
  margin-left: 50px;
  opacity: 0;
  transition: .6s; 
}

/* 点击切换横条，选中radio，更改内容样式 */
#slide_1:checked ~ .inner_part .content_1,
#slide_2:checked ~ .inner_part .content_2,
#slide_3:checked ~ .inner_part .content_3 {
  /* 透明度设置1显示内容 */
  opacity: 1;
  margin-left: 0;
  z-index: 100;
  transition-delay: .3s;
}

.content .title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin: 0 0 20px 0;
}

.content .text {
  font-size: 19px;
  color: #4e4a67;
  margin: 0 auto 30px auto;
  line-height: 1.5em;
  text-align: justify;
}

.slider {
  position: absolute;
  bottom: 25px;
  left: 55%;
  transform: translateX(-50%);
  z-index: 1;
}

/* 三个切换横条公共样式 */
.slider .slide {
  position: relative;
  height: 10px;
  width: 50px;
  background: #d9d9d9;
  border-radius: 5px;
  display: inline-flex;
  margin: 0 3px;
  cursor: pointer;
}

/* 设置切换横条的默认样式，设置背景色为黑色，
但是宽度为负数，隐藏起来 */
.slider .slide:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: -100%;
  background: #000000;;
  border-radius: 10px;
  transform: scaleX(0);
  transition: transform .6s;
  transform-origin: left;
}

/* 点击切换的时候改变横条宽度，颜色显示出来 */
#slide_1:checked ~ .slider .slide_1:before,
#slide_2:checked ~ .slider .slide_2:before,
#slide_3:checked ~ .slider .slide_3:before {
  transform: scaleX(1);
  width: 100%;
}

input {
  display: none;
}
</style>

</head>
<body>
<!-- 第一步：写好整个html布局，这里radio的作用是
  监听radio是否被选中，用于改变样式 -->
<div class="container">
  <div class="card">
    <input type="radio" name="select" id="slide_1" checked>
    <input type="radio" name="select" id="slide_2">
    <input type="radio" name="select" id="slide_3">
       
    <!-- 三个切换横条，使用label和radio联系起来 -->
    <div class="slider">
      <label for="slide_1" class="slide slide_1"></label>
      <label for="slide_2" class="slide slide_2"></label>
      <label for="slide_3" class="slide slide_3"></label>
    </div>
    
    <div class="inner_part">
        <span class="img">
      <img class="img_1" src="images/1.jpg">
    </span>
      <div class="content content_1">
        <div class="title">勒布朗·詹姆斯</div>
        <div class="text">
            勒布朗·詹姆斯，1984年12月30日出生在美国·俄亥俄州·克里夫兰，
            美国男子职业篮球运动员，司职小前锋，现效力于克利夫兰骑士队。
        </div>
     </div>
    </div>
   
    <div class="inner_part">
        <span class="img">
      <img class="img_2" src="images/2.jpg">
    </span>
      <div class="content content_2">
        <div class="title">科比·布莱恩特</div>
        <div class="text">
            洛杉矶当地时间2006年1月22日晚，你在做什么？ 科比在得到81分
            后被替换下场高举右手接受球迷欢呼 就在这个晚上， 洛杉矶湖人队
            的科比-布莱恩特(Kobe Bryant)一手缔造了联盟史上的又一个不可
            思议的神迹。
        </div>
     </div>
    </div>
    
    <div class="inner_part">
      <span class="img">
        <img class="img_3" src="images/3.jpg">
      </span>
      <div class="content content_3">
        <div class="title">阿伦·埃泽尔·艾弗森</div>
        <div class="text">
            阿伦·艾弗森(Allen Iverson)，美国NBA著名篮球运动员，
            曾11次入选NBA全明星阵容，曾任美国男篮梦之队队长。官方身高1.83米，
            体重81.6公斤，原地净弹跳高度达到40.5英吋，助跑净弹跳高度....
        </div>
     </div>
    </div>
  </div>
 </div>
</body>
</html>
